<template>
  <div class="carousel">
    <div v-for="(slide, index) in slides" :key="index" 
         class="carousel-slide" :class="{ active: currentSlide === index }">
      <img :src="slide.imgUrl" :alt="slide.alt">
    </div>
    <div class="carousel-controls">
      <div v-for="(slide, index) in slides" :key="index" 
           class="carousel-dot" :class="{ active: currentSlide === index }"
           @click="goToSlide(index)"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

import banner1 from '@/assets/img/banner/banner1.png'
import banner2 from '@/assets/img/banner/banner2.png'
import banner3 from '@/assets/img/banner/banner3.png'
import banner4 from '@/assets/img/banner/banner4.png'
import banner5 from '@/assets/img/banner/banner5.png'
import banner6 from '@/assets/img/banner/banner6.png'

// 响应式数据
const currentSlide = ref(0)
const slides = ref([
  { imgUrl: banner1, alt: 'Banner 1' },
  { imgUrl: banner2, alt: 'Banner 2' },
  { imgUrl: banner3, alt: 'Banner 3' },
  { imgUrl: banner4, alt: 'Banner 4' },
  { imgUrl: banner5, alt: 'Banner 5' },
  { imgUrl: banner6, alt: 'Banner 6' }
])
let interval = null

// 响应式轮播逻辑
const goToSlide = (index) => {
  currentSlide.value = index
}

const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % slides.value.length
}

onMounted(() => {
  interval = setInterval(nextSlide, 5000)
})

onUnmounted(() => {
  clearInterval(interval)
})
</script>

<style scoped>
.carousel {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.carousel-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel-dot.active {
  background-color: #fff;
}
</style>